<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <title>励销渠道详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/plugins/bootstrap-datepicker/css/datepicker.css'/>">
    <link href="<@s.url '/assets/css/control.css'/>" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/css/jquery.pagination.css'/>">
    <#include '../include/baselink.ftl'>

</head>
<body class="admin-modals-page sb-l-o sb-r-c onload-check">
<div id="main">
<#include '../include/header.ftl'>
<#include '../include/sidebar.ftl'>
    <section id="content_wrapper">
        <section id="content" class="table-layout animated fadeIn">
            <div class="tray tray-center">
                <div class="page-heading pt10 pb10 mb10">
                    <div class="row">
                        <div class="col-md-12">
                            <h3>{{lxChannel.companyName}}<small>&nbsp;&nbsp;</small>
                                <small>| 客户名称: <label class="text-primary">{{lxChannel.name}}</label></small>
                                <small>| 创建人姓名: <label class="text-primary">{{lxChannel.creatorName}}</label></small>
                                <#--<small>| 协作人:-->
                                    <#--<label class="text-primary ml5" v-for="item in assisUsers">测试</label>-->
                                    <#--<a href="#"><i class="fa fa-pencil m-l-xs" @click="showAssisUserModal"></i></a>-->
                                <#--</small>-->
                            </h3>
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-heading pn">
                        <ul class="nav panel-tabs-border panel-tabs panel-tabs-left">
                            <li v-bind:class="{ active: isActiveChannel }">
                                <a href="#tab_index" @click="channelActive()" data-toggle="tab" aria-expanded="true">渠道详情</a>
                            </li>
                            <li  v-bind:class="{ active: isActiveCustomer }">
                                <a href="#tabCustomer" @click="customerActive()" data-toggle="tab" aria-expanded="false">客户订单</a>
                            </li>
                            <li v-bind:class="{ active: isActiveDeliver }">
                                <a href="#tabDeliver" @click="deliverActive()" data-toggle="tab" aria-expanded="false">交付订单</a>
                            </li>
                        </ul>
                    </div>

                    <div class="panel-body">
                        <div class="tab-content pn br-n admin-form">
                            <div id="tab_index" class="tab-pane" v-bind:class="{ active: isActiveChannel }">
                                <div class="col-sm-6">
                                    <#include 'modals/channelBasicTabPane.ftl'>
                                </div>
                                <div class="col-sm-6">
                                    <component-revisit-log ref="memorandumList" v-bind:loggableid="lxChannel.lxId" loggabletype="Customer" title="签约渠道动态"></component-revisit-log>
                                </div>
                            </div>

                            <#--引入客户订单-->
                                <#include 'modals/customerOrderList.ftl'>
                            <#--引入交付订单-->
                                <#include 'modals/deliverOrderList.ftl'>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

</div>
<#include '../include/footer_js.ftl'/>
<script src="<@s.url '/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js'/>"></script>
<script src="<@s.url '/assets/plugins/bootstrap-datepicker/js/locales/bootstrap-datepicker.zh-CN.js'/>"></script>
<script src="<@s.url '/assets/js/jquery.pagination.min.js'/>"></script>

<#include '../component/revisit-log.ftl'/>
<script>

    var app = new Vue({
        el:'#main',
        data:{
            isActiveDeliver:false,
            isActiveChannel:true,
            isActiveCustomer:false,
            customerOrderLength:0,
            deliverOrderLength:0,
            lxId: getQueryString("lxId"),
            lxChannel:{
                companyName:'',
                categoryMapped:'',
                staffSize:'',
                sourceMapped:'',
                name:'',//客户名称
                creatorName:''
            },
            searchInfoCustomer:{
                page:1,//当前页
                pageSize:15,
                customerId:getQueryString("lxId")
            },
            searchInfoDeliver:{
                page:1,//当前页
                pageSize:15,
                customerId:getQueryString("lxId")
            },
            //渠道详情页中的客户订单
            searchInfoCustomerIndex:{
                page:1,//当前页
                pageSize:8,
                customerId:getQueryString("lxId")
            },
            searchInfoDeliverIndex:{
                page:1,//当前页
                pageSize:8,
                customerId:getQueryString("lxId")
            },
            customerOrders:[],
            customerOrdersIndex:[],
            deliverOrders:[],
            deliverOrdersIndex:[]
        },
        created: function () {
            this.findLxChannelByLxId();
            this.findCustomerOrders();
            this.findDeliverOrders();
            this.findCustomerOrdersIndex();
            this.findDeliverOrdersIndex();
        },
        watch: {
            "searchInfo.page": function () {
                this.findCustomerOrders();
            }
        },
        computed: {

        },
        methods: {
            findLxChannelByLxId: function () {
                var url = contentPath + "/lxChannel/findLxChannelById?lxId=" + this.lxId;
                this.$http.get(url)
                        .then(function (response) {
                            this.lxChannel = response.body.data;
                            console.log(response);
                }, function (error) {
                    swal(error.body.msg);
                })
            },
            // update: function () {
            //     var url = contentPath + "/lxChannel/updateLxChannel";
            //     $('#update').modal('hide');
            //     this.$http.post(url,this.lxChannel)
            //             .then(function () {
            //                 swal("修改成功！", "基本信息已修改", "success");
            //             }, function (error) {
            //                 swal(error.body.msg);
            //             })
            // },
            findCustomerOrders: function () {
                var url = contentPath + "/lxCustomerOrder/findLxCustomerOrderByCustomerId";
                this.$http.post(url, this.searchInfoCustomer).then(function (response) {
                    this.customerOrders = response.data.data.list;
                    this.customerOrderLength = response.data.data.list.length;
                    console.log(response);
                    var temp = this;
                    $("#pageMenu").page({
                        total: response.data.data.total,
                        pageSize: response.data.data.pageSize,
                        firstBtnText: '首页',
                        lastBtnText: '尾页',
                        prevBtnText: '上一页',
                        nextBtnText: '下一页',
                        showInfo: true,
                        showJump: true,
                        jumpBtnText: '跳转',
                        infoFormat: '{start} ~ {end}条，共{total}条'
                    }, response.data.data.page).on("pageClicked", function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    }).on('jumpClicked', function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    });
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            findDeliverOrders: function () {
                var url = contentPath + "/LxDeliverOrder/findLxDeliverOrderByCustomerId";
                this.$http.post(url, this.searchInfoDeliver).then(function (response) {
                    this.deliverOrders = response.data.data.list;
                    this.deliverOrderLength = response.data.data.list.length;
                    console.log(response);
                    var temp = this;
                    $("#pageMenu").page({
                        total: response.data.data.total,
                        pageSize: response.data.data.pageSize,
                        firstBtnText: '首页',
                        lastBtnText: '尾页',
                        prevBtnText: '上一页',
                        nextBtnText: '下一页',
                        showInfo: true,
                        showJump: true,
                        jumpBtnText: '跳转',
                        infoFormat: '{start} ~ {end}条，共{total}条'
                    }, response.data.data.page).on("pageClicked", function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    }).on('jumpClicked', function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    });
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            findCustomerOrdersIndex: function () {
                var url = contentPath + "/lxCustomerOrder/findLxCustomerOrderByCustomerId";
                this.$http.post(url, this.searchInfoCustomerIndex).then(function (response) {
                    this.customerOrdersIndex = response.data.data.list;
                    console.log(response);
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            findDeliverOrdersIndex: function () {
                var url = contentPath + "/LxDeliverOrder/findLxDeliverOrderByCustomerId";
                this.$http.post(url, this.searchInfoDeliverIndex).then(function (response) {
                    this.deliverOrdersIndex = response.data.data.list;
                    console.log(response);
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            //跳转
            customerActive: function () {
                this.isActiveCustomer = true;
                this.isActiveChannel = false;
                this.isActiveDeliver = false;
            },
            deliverActive: function () {
                this.isActiveCustomer = false;
                this.isActiveChannel = false;
                this.isActiveDeliver = true;
            },
            channelActive: function () {
                this.isActiveCustomer = false;
                this.isActiveChannel = true;
                this.isActiveDeliver = false;
            }




            // findDeliverOrders: function () {
            //     var url = contentPath + "/lxDeliverOrder/findLxDeliverOrderByCustomerIds";
            //     this.$http.post(url, this.searchInfo).then(function (response) {
            //         this.deliverOrders = response.data.data.list.ftl;
            //         console.log(response);
            //         var temp = this;
            //         $("#pageMenu").page({
            //             total: response.data.data.total,
            //             pageSize: response.data.data.pageSize,
            //             firstBtnText: '首页',
            //             lastBtnText: '尾页',
            //             prevBtnText: '上一页',
            //             nextBtnText: '下一页',
            //             showInfo: true,
            //             showJump: true,
            //             jumpBtnText: '跳转',
            //             infoFormat: '{start} ~ {end}条，共{total}条'
            //         }, response.data.data.page).on("pageClicked", function (event, pageIndex) {
            //             temp.searchInfo.page = pageIndex + 1;
            //         }).on('jumpClicked', function (event, pageIndex) {
            //             temp.searchInfo.page = pageIndex + 1;
            //         });
            //     }, function (error) {
            //         swal(error.body.msg);
            //     });
            // }
        }
    })
</script>

</body>
</html>
